<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- GET请求：

    实战中：我们通过要去看开发的接口文档
    阅读文档：遵循"四看”
    一看：请求方式
    二看：请求地址
    三看：请求参数
    四看：返回体
    不管文档的形式

    网易云的搜素接口
    1.GET
    2.接口地址 ： 域名+路径
    http://netease.0melon0.cn/search
    3.拼接必填参数
    http://netease.0melon0.cn/search？keywords="" -->


    <!-- 
    改造这个ajax_Get不合理的地方
    为了让我的ajax_Get这个函数通过行更强
    1.将参数 从固定 =》 参数传入的形式
    2. 参数拼接
        url 地址
        data 参数数组 
    -->
        
    <script>
        let url = 'http://netease.0melon0.cn/search';
        let data = {
            keywords:'筷子兄弟',
            limit: 100
        };

        // 1.0 GET => 2.0 POST GET 明天封装 => 3.0 promise 下周
        // 第一:
        ajax_Get(url, data, renderToDom);
        // 第二：
        ajax_Get(url, data, function(data) {
            // 在这里渲染数据也可以
            // 直接传递一个匿名函数
            // 这里注意的是this指向的是window
        });
        
        function ajax_Get(url, data, cb) {
            let xhr = new XMLHttpRequest();
            // let url = `http://netease.0melon0.cn/search?keywords=${keyword}`;
            // 对url做一些字符串的拼接操作，变成上面注释的样子
            let url1 = url + '?';
            // 将data对象变成字符串的键值对
            for (let key in data) {
                url1 += `${key}=${data[key]}&`;
            }
            // 将最后的&符号删掉
            url1 = url1.slice(0, -1);
            console.log(url1);
            xhr.open('GET', url1);
            xhr.send();
            xhr.addEventListener('readystatechange', function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        // console.log(xhr.responseText);
                        // 因为ajax中xhr的responseText 返回的是一个json格式的对象
                        let data = JSON.parse(xhr.responseText);
                        console.log(data);
                        // dom操作
                        cb(data);
                    };
                };
            });
        };
        function renderToDom(data) {
            let msg = data.result.songs//歌曲的数组
            let div = document.createElement('div');
            msg.forEach(function(ele) {
                div.innerHTML +=`
                                <div> 
                                    歌曲名字: ${ele.name}
                                </div>
                                `
            });
            document.body.appendChild(div);
        }
    </script>
</body>
</html>